$height_add: var(--height_button);
$fontSize_add: var(--fontSize);
$color_add: #fff; // 文字颜色
$color_adorn_add: var(--color_adorn2); // 按钮色

$height_file: var(--height_form);
$fontSize_file: calc(var(--fontSize) * .9);
$color_file: var(--font_color); // 文字颜色
$color_adorn_file: #ddd; // 浅灰色

$color_tip: var(--font_color_tip); // 文字颜色: 提示信息

button.btn-hover{ opacity: .8; } // 按钮经过

zj-file{ width: 100%; }
.zj-file{
  width: 100%;
  >view, >button{ width: 100%; }
  .file_add{
    min-height: $height_add;
    width: 100%;
    background-color: $color_adorn_add;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.4em;
    padding: .5em 1em;
    font-size: $fontSize_add;
    color: $color_add;
    &.disabled{ background-color: $color_tip; }
    &+.file_area{ margin-top: .5em; }
  }
  .file_tip{
    font-size: $fontSize_file;
    color: $color_tip;
    line-height: 1.2em;
    padding: .25em 0;
  }
  .file_area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: $fontSize_file;
    color: $color_file;
  }
  .file{
    min-height: $height_file;
    width: 100%;
    background-color: $color_adorn_file;
    display: flex;
    align-items: center;
    margin-bottom: .5em;
    &:last-child{ margin-bottom: 0; }
  }
  .file_name{
    height: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: .5em;
    padding-left: 1em;
  }
  .file_del{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1em;
    font-size: 1em;
  }
  .file_maxlength{
    font-size: 12px;
    color: $color_tip;
    margin-top: .5em;
    text-align: right;
  }
}
